import { Route, Navigate } from 'react-router-dom';
import React from 'react';

export interface IMenuProps {
    keyid: string,
    label: string,
    icon?: any,
    key: string,
    children?: IMenuProps[],
    element: React.ReactNode,
    index?: number, // +++++++++
    hidden?: boolean // +++++++++++
}

export const renderRoute = (menus: IMenuProps[]) => {
    return menus.map(item => {
        if (item.children) {
            return <Route key={item.key} path={item.key} element={item.element}>
                {
                    renderRoute(item.children)
                }
            </Route>
        } else {
            if (item.index) {
                return (
                    <React.Fragment key={item.key}>
                        <Route index element={<Navigate to={item.key} replace={true} />} />
                        <Route path={item.key} element={item.element} />
                    </React.Fragment>
                )
            } else {
                return <Route key={item.key} path={item.key} element={item.element} />
            }

        }
    })
}